import React, { useState, useEffect } from 'react';
import { toast } from '@/lib/toast-with-audio';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';
import { useTheme } from '@/hooks/useTheme';
import { useAudio } from '@/contexts/AudioContext';
import { settingsApi } from '@/store/settings';
import type {
  PersonalSettings,
  NotificationSettings,
  SecuritySettings,
  SystemConfigurations
} from '@/store/settings';

// 安全问题选项（静态数据，保留）
const securityQuestions = [
  '您母亲的姓名是？',
  '您父亲的姓名是？',
  '您的出生地是？',
  '您的小学名称是？',
  '您的第一个宠物名字是？',
  '您的驾驶执照号码是？'
];

// 表单组件
const FormField: React.FC<{
  label: string;
  children: React.ReactNode;
  className?: string;
  required?: boolean;
}> = ({ label, children, className = '', required = false }) => {
  return (
    <div className={`mb-4 ${className}`}>
      <label className="block text-sm font-medium text-gray-700 mb-1">
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <div>{children}</div>
    </div>
  );
};

// 开关组件
const Switch: React.FC<{
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}> = ({ checked, onChange, disabled = false }) => {
  return (
    <div className="relative inline-block w-12 h-6">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        disabled={disabled}
        className="opacity-0 w-0 h-0 absolute"
      />
      <div
        className={`w-12 h-6 rounded-full transition-colors duration-300 cursor-pointer ${
          checked ? 'bg-blue-500' : 'bg-gray-300'
        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
        onClick={() => !disabled && onChange(!checked)}
      >
        <div
          className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-300 ${
            checked ? 'translate-x-6' : 'translate-x-0'
          }`}
        ></div>
      </div>
    </div>
  );
};

// 用户头像组件
const UserAvatar: React.FC<{ name: string; size?: 'sm' | 'md' | 'lg' }> = ({ name, size = 'md' }) => {
  const sizeClasses = {
    sm: 'w-10 h-10 text-sm',
    md: 'w-12 h-12 text-base',
    lg: 'w-16 h-16 text-lg'
  };
  
  // 为不同的姓名生成不同的背景色
  const colors = [
    'bg-blue-100 text-blue-600',
    'bg-green-100 text-green-600',
    'bg-purple-100 text-purple-600',
    'bg-amber-100 text-amber-600',
    'bg-pink-100 text-pink-600',
    'bg-indigo-100 text-indigo-600'
  ];
  
  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const colorClass = colors[hash % colors.length];
  
  return (
    <div className={`${sizeClasses[size]} rounded-full ${colorClass} flex items-center justify-center font-medium`}>
      {name}
    </div>
  );
};

export default function Settings() {
  const [activeTab, setActiveTab] = useState('personal');
  const [personalData, setPersonalData] = useState<PersonalSettings & {
    currentPassword: string;
    newPassword: string;
    confirmPassword: string;
    securityQuestion: string;
    securityAnswer: string;
  }>({
    id: '',
    name: '',
    email: '',
    phone: '',
    language: '中文',
    timeZone: 'GMT+8',
    department: '',
    position: '',
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
    securityQuestion: '您母亲的姓名是？',
    securityAnswer: ''
  });
  const [notificationData, setNotificationData] = useState<NotificationSettings>({
    email: {
      newTask: true,
      taskUpdate: true,
      comment: true,
      system: true
    },
    push: {
      newTask: true,
      taskUpdate: false,
      comment: true,
      system: false
    },
    sms: {
      newTask: false,
      taskUpdate: false,
      comment: false,
      emergency: true
    },
    audio: {
      enabled: true,
      volume: 80,
      voicePrompt: true,
      newMessage: true,
      taskNotification: true,
      systemNotification: true
    },
    dailySummary: "afternoon",
    weeklySummary: "none"
  });
  const [securityData, setSecurityData] = useState<SecuritySettings>({
    twoFactorEnabled: true,
    passwordExpires: '3个月',
    passwordExpiry: "3",
    lastPasswordChange: '2023-01-15',
    sessionTimeout: "30",
    allowedIPs: ['192.168.1.0/24', '10.0.0.0/8'],
    loginHistory: [
      { time: '2023-03-03 09:30', location: '北京', device: 'Chrome / Windows' },
      { time: '2023-03-02 16:45', location: '北京', device: 'Safari / MacOS' },
      { time: '2023-03-01 11:20', location: '上海', device: 'Firefox / Windows' },
      { time: '2023-02-28 15:10', location: '北京', device: 'Edge / Windows' }
    ]
  });
  const [systemConfig, setSystemConfig] = useState<SystemConfigurations>({
    language: '中文',
    timeZone: 'GMT+8',
    dateFormat: 'YYYY-MM-DD',
    timeFormat: '24小时制',
    defaultProject: '电商系统项目群',
    dashboardLayout: '标准视图',
    theme: 'light'
  });
  const [loading, setLoading] = useState(false);
  const { theme, toggleTheme } = useTheme();
  const { settings: audioSettings, updateSettings } = useAudio();
  
  // 加载系统设置数据
  useEffect(() => {
    const loadSettings = async () => {
      setLoading(true);
      try {
        const response = await settingsApi.getSettings();
        if (response.success && response.data) {
          const { personal, notification, security, system } = response.data;
          
          if (personal) {
            setPersonalData(prev => ({
              ...prev,
              ...personal,
              currentPassword: prev.currentPassword,
              newPassword: prev.newPassword,
              confirmPassword: prev.confirmPassword,
              securityQuestion: prev.securityQuestion,
              securityAnswer: prev.securityAnswer
            }));
          }
          if (notification) setNotificationData(notification);
          if (security) setSecurityData(security);
          if (system) setSystemConfig(system);
        }
      } catch (error) {
        console.error('加载系统设置失败:', error);
        toast.error('加载系统设置失败');
      } finally {
        setLoading(false);
      }
    };

    loadSettings();
  }, []);

  // 同步音频设置到通知数据
  useEffect(() => {
    if (audioSettings) {
      setNotificationData(prev => ({
        ...prev,
        audio: {
          enabled: audioSettings.enabled,
          volume: Math.round(audioSettings.volume * 100), // 转换为百分比
          voicePrompt: audioSettings.voiceEnabled,
          newMessage: true,
          taskNotification: true,
          systemNotification: true
        }
      }));
    }
  }, [audioSettings]);
  
  const handlePersonalChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setPersonalData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleNotificationChange = (
    type: 'email' | 'push' | 'sms' | 'audio', 
    setting: string, 
    checked: boolean
  ) => {
    setNotificationData(prev => ({
      ...prev,
      [type]: {
        ...prev[type],
        [setting]: checked
      }
    }));
    
    // 如果是音频设置，同步到音频上下文
    if (type === 'audio') {
      // 处理字段映射
      const audioSettingMap: Record<string, string> = {
        voicePrompt: 'voiceEnabled'
      };
      const actualSetting = audioSettingMap[setting] || setting;
      
      updateSettings({
        ...audioSettings,
        [actualSetting]: checked
      });
    }
  };
  
  const handleAudioVolumeChange = (volume: number) => {
    setNotificationData(prev => ({
      ...prev,
      audio: {
        ...prev.audio,
        volume: volume
      }
    }));
    
    // 同步到音频设置
    updateSettings({
      ...audioSettings,
      volume: volume / 100
    });
  };
  
  const handleSystemConfigChange = (field: keyof SystemConfigurations, value: string) => {
    setSystemConfig(prev => ({
      ...prev,
      [field]: value
    }));
  };
  
  const handleSavePersonal = async () => {
    setLoading(true);
    try {
      const { currentPassword, newPassword, confirmPassword, ...personalInfo } = personalData;
      const response = await settingsApi.updatePersonalSettings(personalInfo);
      
      if (response.success) {
        toast.success('个人信息已保存');
      } else {
        toast.error(response.message || '保存个人信息失败');
      }
    } catch (error) {
      console.error('保存个人信息失败:', error);
      toast.error('保存个人信息失败');
    } finally {
      setLoading(false);
    }
  };
  
  const handleSaveNotifications = async () => {
    setLoading(true);
    try {
      const response = await settingsApi.updateNotificationSettings(notificationData);
      
      if (response.success) {
        toast.success('通知偏好已保存');
      } else {
        toast.error(response.message || '保存通知偏好失败');
      }
    } catch (error) {
      console.error('保存通知偏好失败:', error);
      toast.error('保存通知偏好失败');
    } finally {
      setLoading(false);
    }
  };
  
  const handleSaveSecurity = async () => {
    setLoading(true);
    try {
      const response = await settingsApi.updateSecuritySettings(securityData);
      
      if (response.success) {
        toast.success('安全设置已保存');
      } else {
        toast.error(response.message || '保存安全设置失败');
      }
    } catch (error) {
      console.error('保存安全设置失败:', error);
      toast.error('保存安全设置失败');
    } finally {
      setLoading(false);
    }
  };
  
  const handleSaveSystemConfig = async () => {
    setLoading(true);
    try {
      const response = await settingsApi.updateSystemConfigurations(systemConfig);
      
      if (response.success) {
        toast.success('系统配置已保存');
      } else {
        toast.error(response.message || '保存系统配置失败');
      }
    } catch (error) {
      console.error('保存系统配置失败:', error);
      toast.error('保存系统配置失败');
    } finally {
      setLoading(false);
    }
  };
  
  const handleChangePassword = async () => {
    if (!personalData.currentPassword) {
      toast.error('请输入当前密码');
      return;
    }
    
    if (!personalData.newPassword) {
      toast.error('请输入新密码');
      return;
    }
    
    if (personalData.newPassword !== personalData.confirmPassword) {
      toast.error('两次输入的新密码不一致');
      return;
    }
    
    setLoading(true);
    try {
      const response = await settingsApi.changePassword({
        currentPassword: personalData.currentPassword,
        newPassword: personalData.newPassword,
        confirmPassword: personalData.confirmPassword
      });
      
      if (response.success) {
        toast.success('密码已成功修改');
        
        // 清空密码字段
        setPersonalData(prev => ({
          ...prev,
          currentPassword: '',
          newPassword: '',
          confirmPassword: ''
        }));
      } else {
        toast.error(response.message || '修改密码失败');
      }
    } catch (error) {
      console.error('修改密码失败:', error);
      toast.error('修改密码失败');
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <div>
      <div className="mb-6">
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
        <h1 className="text-2xl font-bold text-gray-800 dark:text-white">系统设置</h1>
        <p className="text-gray-600 mt-1">管理您的个人偏好、通知设置和安全选项</p>
        </motion.div>
      </div>
      
      {/* 标签导航 */}
      <div className="border-b border-gray-200 dark:border-gray-600 mb-6">
        <nav className="-mb-px flex space-x-8">
          <button
            className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
              activeTab === 'personal'
                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-500'
            }`}
            onClick={() => setActiveTab('personal')}
          >
            个人设置
          </button>
          <button
            className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
              activeTab === 'notifications'
                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-500'
            }`}
            onClick={() => setActiveTab('notifications')}
          >
            通知设置
          </button>
          <button
            className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
              activeTab === 'security'
                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-500'
            }`}
            onClick={() => setActiveTab('security')}
          >
            安全设置
          </button>
          <button
            className={`py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
              activeTab === 'system'
                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-500'
            }`}
            onClick={() => setActiveTab('system')}
          >
            系统配置
          </button>
        </nav>
      </div>
      
      {/* 标签内容 */}
      {activeTab === 'personal' && (
        <div className="grid grid-cols-3 gap-6">
          {/* 个人信息 */}
          <div className="col-span-2">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
            >
              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-6">个人信息</h2>
              <div className="grid grid-cols-2 gap-4">
                <FormField label="姓名" required>
                  <input
                    type="text"
                    name="name"
                    value={personalData.name}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <FormField label="电子邮箱" required>
                  <input
                    type="email"
                    name="email"
                    value={personalData.email}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <FormField label="手机号码" required>
                  <input
                    type="tel"
                    name="phone"
                    value={personalData.phone}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <FormField label="部门">
                  <input
                    type="text"
                    name="department"
                    value={personalData.department}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <FormField label="职位">
                  <input
                    type="text"
                    name="position"
                    value={personalData.position}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
              </div>
              
              <div className="flex justify-end mt-6">
                <button
                  className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-2"
                >
                  取消
                </button>
                <button
                  className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                  onClick={handleSavePersonal}
                >
                  保存更改
                </button>
              </div>
            </motion.div>
            
            {/* 修改密码 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.1 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mt-6"
            >
              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">修改密码</h2>
              <div className="grid grid-cols-2 gap-4">
                <FormField label="当前密码" required>
                  <input
                    type="password"
                    name="currentPassword"
                    value={personalData.currentPassword}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <div></div>
                
                <FormField label="新密码" required>
                  <input
                    type="password"
                    name="newPassword"
                    value={personalData.newPassword}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
                
                <FormField label="确认新密码" required>
                  <input
                    type="password"
                    name="confirmPassword"
                    value={personalData.confirmPassword}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
              </div>
              
              <div className="flex justify-end mt-6">
                <button
                  className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-2"
                >
                  取消
                </button>
                <button
                  className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                  onClick={handleChangePassword}
                >
                  更改密码
                </button>
              </div>
            </motion.div>
            
            {/* 安全问题 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.2 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mt-6"
            >
              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">安全问题</h2>
              <div className="grid grid-cols-1 gap-4">
                <FormField label="选择安全问题" required>
                  <select
                    name="securityQuestion"
                    value={personalData.securityQuestion}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  >
                    {securityQuestions.map((question) => (
                      <option key={question} value={question}>
                        {question}
                      </option>
                    ))}
                  </select>
                </FormField>
                
                <FormField label="安全问题答案" required>
                  <input
                    type="text"
                    name="securityAnswer"
                    value={personalData.securityAnswer}
                    onChange={handlePersonalChange}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                </FormField>
              </div>
              
              <div className="flex justify-end mt-6">
                <button
                  className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-2"
                >
                  取消
                </button>
                <button
                  className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                  onClick={handleSaveSecurity}
                >
                  保存更改
                </button>
              </div>
            </motion.div>
          </div>
          
          {/* 用户信息卡片 */}
          <div className="col-span-1">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6"
            >
              <div className="flex flex-col items-center">
                <UserAvatar name={personalData.name} size="lg" />
                <h3 className="text-lg font-semibold text-gray-800 dark:text-white mt-4">{personalData.name}</h3>
                <p className="text-gray-600 dark:text-gray-300 text-sm">{personalData.position}</p>
                <p className="text-gray-500 dark:text-gray-400 text-xs">{personalData.department}</p>
                
                <div className="mt-6 w-full space-y-3">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">电子邮箱</span>
                    <span className="text-gray-800 dark:text-gray-200">{personalData.email}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">手机号码</span>
                    <span className="text-gray-800 dark:text-gray-200">{personalData.phone}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">部门</span>
                    <span className="text-gray-800 dark:text-gray-200">{personalData.department}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">职位</span>
                    <span className="text-gray-800 dark:text-gray-200">{personalData.position}</span>
                  </div>
                </div>
                
                <button
                  className="mt-6 w-full py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                  更换头像
                </button>
              </div>
            </motion.div>
            
            {/* 主题设置 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.1 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 mb-6"
            >
              <h3 className="text-base font-semibold text-gray-800 dark:text-white mb-4">主题设置</h3>
              <div className="flex justify-between items-center mb-3">
                <span className="text-gray-700 dark:text-gray-300">深色模式</span>
                <div className="relative inline-block w-10 mr-2">
                  <input
                    type="checkbox"
                    id="theme-toggle"
                    checked={theme === 'dark'}
                    onChange={toggleTheme}
                    className="sr-only"
                  />
                  <label
                    htmlFor="theme-toggle"
                    className="block h-6 w-10 rounded-full bg-gray-200 dark:bg-gray-600 cursor-pointer transition-colors duration-200 ease-in-out"
                  >
                    <span
                      className={`absolute left-1 top-1 bg-white dark:bg-gray-300 w-4 h-4 rounded-full transition-transform duration-200 ease-in-out ${
                        theme === 'dark' ? 'transform translate-x-4' : ''
                      }`}
                    ></span>
                  </label>
                </div>
              </div>
              
              <div className="flex justify-between items-center mb-3">
                <span className="text-gray-700 dark:text-gray-300">系统语言</span>
                <select
                  className="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  value={systemConfig.language}
                  onChange={(e) => handleSystemConfigChange('language', e.target.value)}
                >
                  <option value="中文">中文</option>
                  <option value="English">English</option>
                </select>
              </div>
              
              <div className="flex justify-between items-center">
                <span className="text-gray-700 dark:text-gray-300">时区设置</span>
                <select
                  className="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  value={systemConfig.timeZone}
                  onChange={(e) => handleSystemConfigChange('timeZone', e.target.value)}
                >
                  <option value="GMT+8">GMT+8</option>
                  <option value="GMT+0">GMT+0</option>
                  <option value="GMT-5">GMT-5</option>
                  <option value="GMT+1">GMT+1</option>
                </select>
              </div>
            </motion.div>
            
            {/* 帮助与支持 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.2 }}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
            >
              <h3 className="text-base font-semibold text-gray-800 dark:text-white mb-4">帮助与支持</h3>
              <div className="space-y-3">
                <button className="w-full flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <i className="fa-solid fa-question-circle text-blue-500 mr-2"></i>
                    <span className="text-gray-700 dark:text-gray-300">常见问题</span>
                  </div>
                  <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                </button>
                
                <button className="w-full flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <i className="fa-solid fa-book-open text-green-500 mr-2"></i>
                    <span className="text-gray-700 dark:text-gray-300">使用文档</span>
                  </div>
                  <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                </button>
                
                <button className="w-full flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <i className="fa-solid fa-headset text-purple-500 mr-2"></i>
                    <span className="text-gray-700 dark:text-gray-300">联系客服</span>
                  </div>
                  <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                </button>
                
                <button className="w-full flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <i className="fa-solid fa-comment-dots text-amber-500 mr-2"></i>
                    <span className="text-gray-700 dark:text-gray-300">意见反馈</span>
                  </div>
                  <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                </button>
              </div>
            </motion.div>
          </div>
        </div>
      )}
      
      {activeTab === 'notifications' && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-6">通知设置</h2>
          
          <div className="space-y-6">
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">邮件通知</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-envelope text-blue-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">新任务通知</span>
                  </div>
                  <Switch
                    checked={notificationData.email.newTask}
                    onChange={(checked) => handleNotificationChange('email', 'newTask', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-tasks text-blue-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">任务状态更新</span>
                  </div>
                  <Switch
                    checked={notificationData.email.taskUpdate}
                    onChange={(checked) => handleNotificationChange('email', 'taskUpdate', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-comment text-blue-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">评论与@提醒</span>
                  </div>
                  <Switch
                    checked={notificationData.email.comment}
                    onChange={(checked) => handleNotificationChange('email', 'comment', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-bell text-blue-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">系统通知</span>
                  </div>
                  <Switch
                    checked={notificationData.email.system}
                    onChange={(checked) => handleNotificationChange('email', 'system', checked)}
                  />
                </div>
              </div>
            </div>
            
            {/* 站内信通知 */}
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">站内信通知</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-tasks text-purple-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">新任务通知</span>
                  </div>
                  <Switch
                    checked={notificationData.push.newTask}
                    onChange={(checked) => handleNotificationChange('push', 'newTask', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-tasks text-purple-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">任务状态更新</span>
                  </div>
                  <Switch
                    checked={notificationData.push.taskUpdate}
                    onChange={(checked) => handleNotificationChange('push', 'taskUpdate', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-comment text-purple-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">评论与@提醒</span>
                  </div>
                  <Switch
                    checked={notificationData.push.comment}
                    onChange={(checked) => handleNotificationChange('push', 'comment', checked)}
                  />
                </div>
                
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-bell text-purple-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">系统通知</span>
                  </div>
                  <Switch
                    checked={notificationData.push.system}
                    onChange={(checked) => handleNotificationChange('push', 'system', checked)}
                  />
                </div>
              </div>
            </div>
            
            {/* SMS通知 */}
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">短信通知</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-mobile-alt text-green-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">紧急任务提醒</span>
                  </div>
                  <Switch
                    checked={notificationData.sms.emergency}
                    onChange={(checked) => handleNotificationChange('sms', 'emergency', checked)}
                  />
                </div>
              </div>
              
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-3">
                <i className="fa-solid fa-info-circle mr-1"></i>
                短信通知仅用于紧急任务和重要提醒，建议保持开启
              </p>
            </div>
            
            {/* 音频通知 */}
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">音频通知</h3>
              <div className="space-y-4">
                {/* 音频通知开关 */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <i className="fa-solid fa-volume-up text-amber-500 mr-3"></i>
                    <span className="text-gray-700 dark:text-gray-300">启用音频通知</span>
                  </div>
                  <Switch
                    checked={notificationData.audio.enabled}
                    onChange={(checked) => handleNotificationChange('audio', 'enabled', checked)}
                  />
                </div>
                
                {/* 音量控制 */}
                {notificationData.audio.enabled && (
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-gray-700 dark:text-gray-300">通知音量</span>
                      <span className="text-sm text-gray-500 dark:text-gray-400">{notificationData.audio.volume}%</span>
                    </div>
                    <input
                      type="range"
                      min="0"
                      max="100"
                      value={notificationData.audio.volume}
                      onChange={(e) => handleAudioVolumeChange(parseInt(e.target.value))}
                      className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer"
                    />
                  </div>
                )}
                
                {/* 语音提示开关 */}
                {notificationData.audio.enabled && (
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <i className="fa-solid fa-microphone text-blue-500 mr-3"></i>
                      <span className="text-gray-700 dark:text-gray-300">语音提示</span>
                    </div>
                    <Switch
                      checked={notificationData.audio.voicePrompt}
                      onChange={(checked) => handleNotificationChange('audio', 'voicePrompt', checked)}
                    />
                  </div>
                )}
                
                {/* 通知类型设置 */}
                {notificationData.audio.enabled && (
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <i className="fa-solid fa-envelope text-purple-500 mr-3"></i>
                        <span className="text-gray-700 dark:text-gray-300">新消息通知</span>
                      </div>
                      <Switch
                        checked={notificationData.audio.newMessage}
                        onChange={(checked) => handleNotificationChange('audio', 'newMessage', checked)}
                      />
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <i className="fa-solid fa-tasks text-green-500 mr-3"></i>
                        <span className="text-gray-700 dark:text-gray-300">任务提醒通知</span>
                      </div>
                      <Switch
                        checked={notificationData.audio.taskNotification}
                        onChange={(checked) => handleNotificationChange('audio', 'taskNotification', checked)}
                      />
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <i className="fa-solid fa-bell text-red-500 mr-3"></i>
                        <span className="text-gray-700 dark:text-gray-300">系统通知</span>
                      </div>
                      <Switch
                        checked={notificationData.audio.systemNotification}
                        onChange={(checked) => handleNotificationChange('audio', 'systemNotification', checked)}
                      />
                    </div>
                  </div>
                )}
              </div>
              
              {notificationData.audio.enabled && (
                <p className="text-sm text-gray-500 dark:text-gray-400 mt-3">
                  <i className="fa-solid fa-info-circle mr-1"></i>
                  音频通知将在新消息到达时播放声音提示，语音提示会播报"您有新的未读消息，请及时查阅"
                </p>
              )}
            </div>
            
            {/* 通知频率 */}
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">通知频率</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    每日通知汇总
                  </label>
                  <select 
                    value={notificationData.dailySummary || "afternoon"}
                    onChange={(e) => setNotificationData(prev => ({ ...prev, dailySummary: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  >
                    <option value="none">不接收</option>
                    <option value="morning">早上 (09:00)</option>
                    <option value="noon">中午 (12:00)</option>
                    <option value="afternoon">下午 (17:00)</option>
                    <option value="evening">晚上 (20:00)</option>
                  </select>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    每周通知汇总
                  </label>
                  <select 
                    value={notificationData.weeklySummary || "none"}
                    onChange={(e) => setNotificationData(prev => ({ ...prev, weeklySummary: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  >
                    <option value="none">不接收</option>
                    <option value="monday">周一</option>
                    <option value="friday">周五</option>
                    <option value="sunday">周日</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          
          <div className="flex justify-end mt-8 space-x-3">
            <button
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              取消
            </button>
            <button
              className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
              onClick={handleSaveNotifications}
            >
              保存更改
            </button>
          </div>
        </motion.div>
      )}
      
      {activeTab === 'security' && (
        <div className="grid grid-cols-3 gap-6">
            {/* 账户安全 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
              className="col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
            >
              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">账户安全</h2>
              
              {/* 二步验证 */}
              <div className="mb-8">
                <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">二步验证</h3>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-gray-700 dark:text-gray-300 mb-1">登录时需要额外的验证步骤</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">提高账户安全性，防止未授权访问</p>
                  </div>
                  <Switch
                    checked={securityData.twoFactorEnabled}
                    onChange={(checked) => setSecurityData(prev => ({ ...prev, twoFactorEnabled: checked }))}
                  />
                </div>
                
                {securityData.twoFactorEnabled && (
                  <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900 border border-blue-100 dark:border-blue-800 rounded-lg">
                    <p className="text-sm text-blue-700 dark:text-blue-300">
                      <i className="fa-solid fa-check-circle mr-1"></i>
                      二步验证已开启，登录时需要输入验证码
                    </p>
                  </div>
                )}
              </div>
            
            {/* 密码策略 */}
            <div className="mb-8">
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">密码策略</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-gray-700 dark:text-gray-300">密码过期时间</span>
                  <select 
                    value={securityData.passwordExpiry || "3"}
                    onChange={(e) => setSecurityData(prev => ({ ...prev, passwordExpiry: e.target.value }))}
                    className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  >
                    <option value="1">1个月</option>
                    <option value="3">3个月</option>
                    <option value="6">6个月</option>
                    <option value="12">12个月</option>
                    <option value="never">永不过期</option>
                  </select>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-gray-700 dark:text-gray-300">密码复杂度要求</span>
                  <span className="text-sm text-gray-500 dark:text-gray-400">8位以上，包含字母和数字</span>
                </div>
                
                <div className="flex justify-between items-center">
                  <span className="text-gray-700 dark:text-gray-300">上次修改密码</span>
                  <span className="text-sm text-gray-500 dark:text-gray-400">{securityData.lastPasswordChange}</span>
                </div>
              </div>
              
              <button
                className="mt-4 px-3 py-1.5 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-sm rounded-lg hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors"
                onClick={() => setActiveTab('personal')}
              >
                <i className="fa-solid fa-key mr-1"></i>
                修改密码
              </button>
            </div>
            
            {/* 会话设置 */}
            <div className="mb-8">
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">会话设置</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-gray-700 dark:text-gray-300">会话超时时间</span>
                  <select 
                    value={securityData.sessionTimeout || "30"}
                    onChange={(e) => setSecurityData(prev => ({ ...prev, sessionTimeout: e.target.value }))}
                    className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  >
                    <option value="5">5分钟</option>
                    <option value="15">15分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">60分钟</option>
                    <option value="120">120分钟</option>
                  </select>
                </div>
              </div>
              
              <div className="mt-4">
                <button
                  className="px-3 py-1.5 bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300 text-sm rounded-lg hover:bg-red-100 dark:hover:bg-red-800 transition-colors"
                >
                  <i className="fa-solid fa-right-from-bracket mr-1"></i>
                  注销所有会话
                </button>
              </div>
            </div>
            
            {/* IP白名单 */}
            <div>
              <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">IP白名单</h3>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">
                限制只能从指定IP地址范围登录系统（留空表示不限制）
              </p>
              <div className="space-y-2">
                {securityData.allowedIPs?.map((ip, index) => (
                  <div key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-2 rounded">
                    <span className="text-sm text-gray-700 dark:text-gray-300">{ip}</span><button className="text-red-500 hover:text-red-700">
                      <i className="fa-solid fa-trash text-xs"></i>
                    </button>
                  </div>
                )) ?? (
                  <p className="text-sm text-gray-500 dark:text-gray-400">暂无IP白名单设置</p>
                )}
                
                <div className="flex">
                  <input
                    type="text"
                    placeholder="添加IP地址或网段"
                    className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                  <button className="px-3 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 transition-colors">
                    <i className="fa-solid fa-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <div className="flex justify-end mt-8 space-x-3">
              <button
                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
              >
                取消
              </button>
              <button
                className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
                onClick={handleSaveSecurity}
              >
                保存更改
              </button>
            </div>
          </motion.div>
          
          {/* 登录历史 */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3, delay: 0.1 }}
            className="col-span-1 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
          >
            <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">最近登录历史</h3>
            
            <div className="space-y-4">
              {securityData.loginHistory?.map((login, index) => (
                <div key={index} className={`p-3 rounded-lg ${index === 0 ? 'bg-blue-50 dark:bg-blue-900 border border-blue-100 dark:border-blue-800' : 'bg-gray-50 dark:bg-gray-700'}`}>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className={`text-sm font-medium ${index === 0 ? 'text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300'}`}>
                        {index === 0 ? '当前会话' : `登录记录 ${index}`}
                      </p>
                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        {login.device}
                      </p>
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      {login.time}
                    </div>
                  </div>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    位置: {login.location}
                  </p>
                  
                  {index !== 0 && (
                    <button className="mt-2 text-xs text-red-500 hover:text-red-700">
                      <i className="fa-solid fa-ban mr-1"></i>
                      结束会话
                    </button>
                  )}
                </div>
              ))}
            </div>
            
            <button
              className="mt-4 w-full py-2 bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300 text-sm rounded-lg hover:bg-red-100 dark:hover:bg-red-800 transition-colors"
            >
              <i className="fa-solid fa-right-from-bracket mr-1"></i>
              结束所有其他会话
            </button>
          </motion.div>
        </div>
      )}
      
      {activeTab === 'system' && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5"
        >
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">系统配置</h2>
          
          <div className="grid grid-cols-2 gap-6">
            <div>
              <FormField label="默认语言">
                <select 
                  value={systemConfig.language}
                  onChange={(e) => handleSystemConfigChange('language', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="中文">中文</option>
                  <option value="English">English</option>
                </select>
              </FormField>
              
              <FormField label="时区">
                <select 
                  value={systemConfig.timeZone}
                  onChange={(e) => handleSystemConfigChange('timeZone', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="GMT+8">GMT+8 (北京时间)</option>
                  <option value="GMT+0">GMT+0 (伦敦时间)</option>
                  <option value="GMT-5">GMT-5 (纽约时间)</option>
                </select>
              </FormField>
              
              <FormField label="日期格式">
                <select 
                  value={systemConfig.dateFormat}
                  onChange={(e) => handleSystemConfigChange('dateFormat', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="YYYY-MM-DD">YYYY-MM-DD</option>
                  <option value="MM-DD-YYYY">MM-DD-YYYY</option>
                  <option value="DD-MM-YYYY">DD-MM-YYYY</option>
                </select>
              </FormField>
              
              <FormField label="时间格式">
                <select 
                  value={systemConfig.timeFormat}
                  onChange={(e) => handleSystemConfigChange('timeFormat', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="24小时制">24小时制</option>
                  <option value="12小时制">12小时制</option>
                </select>
              </FormField>
            </div>
            
            <div>
              <FormField label="默认项目">
                <select 
                  value={systemConfig.defaultProject}
                  onChange={(e) => handleSystemConfigChange('defaultProject', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="电商系统项目群">电商系统项目群</option>
                  <option value="供应链管理系统">供应链管理系统</option>
                  <option value="数据中台项目">数据中台项目</option>
                </select>
              </FormField>
              
              <FormField label="仪表盘布局">
                <select 
                  value={systemConfig.dashboardLayout}
                  onChange={(e) => handleSystemConfigChange('dashboardLayout', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                >
                  <option value="标准视图">标准视图</option>
                  <option value="紧凑视图">紧凑视图</option>
                  <option value="自定义布局">自定义布局</option>
                </select>
              </FormField>
              
              <FormField label="主题模式">
                <div className="flex space-x-4">
                  <label className="inline-flex items-center">
                    <input
                      type="radio"
                      name="theme"
                      value="light"
                      checked={theme === 'light'}
                      onChange={toggleTheme}
                      className="form-radio text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">浅色模式</span>
                  </label>
                  <label className="inline-flex items-center">
                    <input
                      type="radio"
                      name="theme"
                      value="dark"
                      checked={theme === 'dark'}
                      onChange={toggleTheme}
                      className="form-radio text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">深色模式</span>
                  </label>
                </div>
              </FormField>
              
              <FormField label="通知声音">
                <Switch
                  checked={notificationData.audio.enabled}
                  onChange={(checked) => handleNotificationChange('audio', 'enabled', checked)}
                />
              </FormField>
            </div>
          </div>
          
          <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-600">
            <h3 className="text-base font-medium text-gray-700 dark:text-gray-200 mb-4">数据导入导出</h3>
            
            <div className="grid grid-cols-2 gap-6">
              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">导入数据</h4>
                <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition-colors">
                  <i className="fa-solid fa-file-import text-2xl text-gray-400 mb-2"></i>
                  <p className="text-sm text-gray-600 mb-1">拖放文件到此处或</p>
                  <button className="text-sm text-blue-600 hover:text-blue-800">
                    选择文件
                  </button>
                  <p className="text-xs text-gray-500 mt-2">
                    支持的格式: CSV, JSON, XLSX (最大 10MB)
                  </p>
                </div>
              </div>
              
              <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">导出数据</h4>
                <div className="space-y-3">
                  <button className="w-full flex items-center justify-between p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                    <div className="flex items-center">
                      <i className="fa-solid fa-file-export text-blue-500 mr-2"></i>
                      <span className="text-sm text-gray-700 dark:text-gray-300">导出所有数据</span>
                    </div>
                    <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                  </button>
                  
                  <button className="w-full flex items-center justify-between p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                    <div className="flex items-center">
                      <i className="fa-solid fa-table text-green-500 mr-2"></i>
                      <span className="text-sm text-gray-700 dark:text-gray-300">导出项目数据</span>
                    </div>
                    <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                  </button>
                  
                  <button className="w-full flex items-center justify-between p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                    <div className="flex items-center">
                      <i className="fa-solid fa-user text-purple-500 mr-2"></i>
                      <span className="text-sm text-gray-700 dark:text-gray-300">导出用户数据</span>
                    </div>
                    <i className="fa-solid fa-chevron-right text-gray-400 text-xs"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div className="flex justify-end mt-8 space-x-3">
            <button
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              取消
            </button>
            <button
              className="px-4 py-2 bg-blue-600 border border-transparent rounded-lg text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
              onClick={handleSaveSystemConfig}
            >
              保存更改
            </button>
          </div>
        </motion.div>
      )}
    </div>
  );
}